<template>
	<view class="margin-all-20">
		<view class="actionBar" v-if="Works.WorkState==1 || Works.WorkState==2 ">
			<button v-if="LoginInfo !== 0" class="shareBtn" open-type="share"
				@click="shareHandle(WorksUser.UserID, 'WorksUser', Works.WorksID, 6, '分享', 0)">
				<view class="absolute left right bottom " style="top: -40rpx;margin: auto;">
					<view class="iconfont icon-fenxiang1 bold" style="font-size: 52rpx;"></view>
				</view>
			</button>
			<button v-else class=" shareBtn" open-type="share">
				<view class="absolute left right bottom " style="top: -40rpx;margin: auto;">
					<view class="iconfont icon-fenxiang1 bold" style="font-size: 52rpx;"></view>
				</view>
			</button>
			<view v-if="isZan" class="iconfont icon-dianzan1 favokBtn"
				@click="favHandle(Works.WorksID, -9 ,WorksUser.UserID, '取消作品点赞')"></view>
			<view v-else class="iconfont icon-dianzan favBtn"
				@click="favHandle(Works.WorksID, 9 ,WorksUser.UserID, '作品点赞')"></view>
			<view class="baomingBtn" @click="onSpeedContact(WorksUser.UserID)">极速联系</view>
			<view class="baomingBtn" @click="onInitiateCommunication">发起沟通</view>
		</view>


		<view class="row-start padding-all-20" style="background-color: #fff;"
			@click="navTo(`/artistesPages/pages/artister?artisterID=${WorksUser.UserID}`)">
			<view class="worksHeadPic">
				<head-wear :width="90" :height="90" border-width="4" :WxHeadPic="WorksUser.WxHeadPic"
					:userInfo="WorksUser" :UserLevelID="WorksUser.UserLevelID" image-width="30" image-height="20"
					size="16" right="-7" bottom="0" oneRight="0"></head-wear>
			</view>
			<view class="marginLeft-20" style="width: 80%;">
				<view class="row-between ai-start">
					<view>
						<view class="fs-30 row-start">
							<view class="one-ellipsis" style="max-width: 400rpx;">{{WorksUser.NickName}}</view>
							<image v-if="WorksUser.UserSex == 1" src="/static/icon/boy.png"
								class="marginLeft-10 sex-image-size"></image>
							<image v-else src="/static/icon/girl.png" class="marginLeft-10 sex-image-size"></image>
							<auth-label v-if="WorksUser.isAuthOk == 2" :size="18" height="30"></auth-label>

							<personality-label v-if="WorksUser.BeautifulWomen == 1" :size="18"
								height="30"></personality-label>
							<image :src="baseUrl + 'icon/enterprise.png'" class="marginLeft-10 company-image-size"
								v-if="WorksUser.isCompanyAuth == 2"></image>
						</view>

						<view class="marginTop-8 fs-22" style="color:#999">
							<view>
								<text v-for="(roleitem,roleindex) in UserRoles" :key="roleindex">
									{{ roleitem.LabelName }}
									<text v-if="roleindex < UserRoles.length-1" style="padding: 0 8rpx;">·</text>
									<text v-else style="padding: 0 8rpx;">|</text>
								</text>
								<text>{{ WorksUser.UserCity }}</text>
							</view>
						</view>
					</view>

					<view class="">
						<view class="fs-20">
							<view style="color: #2cff5d;" v-if="WorksUser.isOnline === 1">在线</view>
							<view class="text-align-right" style="color:#d6d6d6;" v-else>
								{{ $common.timeDiff(WorksUser.onlineTime,new Date()) }}
							</view>
						</view>

						<view class="disflex jc-end ai-center marginTop-8"
							@click.stop="onComplaint(`/pages/index/complaint/index?UserID=${WorksUser.UserID}&FeedbackType=5&TargetID=${Works.WorksID}`)">
							<uni-icons type="info" size="18" color="#999"></uni-icons>
							<text class="fs-22" style="color: #999;margin-left: 8rpx;">投诉</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="marginTop-20 padding-all-20 relative" style="background-color: #fff;">

			<view class="commCardTitle">{{ Works.WorkName }}</view>

			<view class="commCardMemo">{{ Works.WorkMemo }}</view>

			<view class="marginTop-10" v-if="Works.WorksUrls">
				<view v-for="(item, index) in Works.WorksUrls" :key="index" @click="showPhoto(Works.WorksUrls, index)"
					class="w-100 text-align-center marginTop-10">
					<!-- <image :src="item" mode="widthFix" style="border-radius: 10rpx;width: 100%;"></image> -->
					<zero-lazy-load borderRadius="10" :image="item" imgMode='widthFix'></zero-lazy-load>
				</view>
			</view>

			<view class="padding-all-20" style="padding-left:0rpx;">
				<view v-for="(item, index) in Works.WorkLabels" :key="index" class="labelName">
					{{ item.LabelName }}
				</view>
			</view>

			<view style="clear:both;height:10rpx;"></view>
			<view class="flexbc padding-all-10 marginTop-30 fs-24"
				style="clear:both;color:#999;border-top:1rpx solid #e0e0e0;">
				<text class="">{{ $common.timeDiff(Works.addTime,new Date()) }}</text>
				<text class="">阅读 {{ Works.ReadCount }}</text>
			</view>
		</view>

		<view style="height: 136rpx;"></view>
		<uni-popup ref="vipPopup" type="center">
			<view class="" style="background-color: #fff;border-radius: 15px;overflow: hidden;width:80vw">
				<view class="text-align-right" style="margin: 15px 15px 0 0 ;" @click="$refs.vipPopup.close()">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
				<view class="fs-28 text-align-center padding-all-10 paddingBottom-35" style="color:#4a4a4a;">
					对方需要您开通会员后才能沟通
				</view>
				<button style="color: #FF9900;" @click="uni.navigateTo({url: '/myPages/pages/openVip'})">开通会员</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		data() {
			return {
				LoginInfo: 0,
				WorksID: 0,
				Works: {},
				WorksUser: {},
				UserRoles: [],
				isZan: false,
				baseUrl: ''
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			// console.log(option.WorksID)
			this.WorksID = option.WorksID
			this.getWorks()
		},
		onShow() {
			this.LoginInfo = uni.getStorageSync("isLogin");
		},
		onShareAppMessage({
			from,
			target
		}) {

			let userinfo = this.WorksUser.NickName;
			let imageUrl = this.Works.WorksUrls[0];

			let myObj = {
				title: this.Works.WorkMemo,
				path: "/works/details?WorksID=" + this.WorksID,
				imageUrl: imageUrl,
				success: (res) => {
					console.log('分享成功')
				},
				fail: (err) => {
					console.log('分享失败', err)
				}
			}

			return myObj;
		},
		methods: {
			// 投诉
			onComplaint(url) {
				if (!uni.getStorageSync("isLogin")) {
					// this.$common.showToast('请先登录！');
					this.$common.goNavPage('/pages/login/weixinlogin');
					return;
				}
				this.navTo(url)
			},
			showPhoto(photos, index) {
				// console.log(photos);
				// this.photoUrls = photos;
				// this.photoShow = true;

				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})
			},
			// 判断有没有登录
			isGetToken() {
				let token = uni.getStorageSync('token')
				let res = true;
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/weixinlogin'
					})
					res = false

				}
				return res
			},

			// onSpeedContact 极速联系
			onSpeedContact(UserID) {
				if (!uni.getStorageSync("isLogin")) {
					this.$common.goNavPage('/pages/login/weixinlogin');
					return false;
				}
				if (this.LoginInfo.UserID == this.WorksUser.UserID) {
					uni.showModal({
						content: "自己不能和自己联系！"
					})
					return false;
				}
				this.$common.goNavPage(`/works/speedContact?UserID=${UserID}`)
			},

			// onInitiateCommunication 发起沟通
			onInitiateCommunication() {

				if (!this.isGetToken()) {
					this.$common.goNavPage('/pages/login/weixinlogin');
					return false;
				}
				// this.LoginInfo = uni.getStorageSync("isLogin");
				// this.UserRoles.UserID

				if (this.LoginInfo.UserID == this.WorksUser.UserID) {
					uni.showModal({
						content: "自己不能和自己对话！"
					})
					return false;
				} else {
					if (this.LoginInfo.UserLevelID == 0) {
						// 没有开通会员先去开通会员
						this.$refs.vipPopup.open()
						return false;
					} else {
						this.$httpost('/Message/MeetMsgGroup', {
							UserID: this.LoginInfo.UserID,
							ArtisterID: this.WorksUser.UserID
						}).then(res => {
							// console.log('MeetMsgGroup', res);
							if (res.code == 200 && res.data.MsgGroupID !== null) {
								this.$common.goNavPage('/messagePages/pages/msgpage?MsgGroupID=' + res.data
									.MsgGroupID)
							}

						});
					}
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getWorks() {
				this.$httpost('/Home/WorksDetails', {
					WorksID: this.WorksID
				}).then(res => {
					// console.log('getWorks', res);
					let isLogin = uni.getStorageInfoSync('isLogin')
					if (res.code == 200) {
						this.WorksUser = res.data.WorksUser;
						this.Works = res.data.Works;
						this.UserRoles = res.data.UserRoles;
						this.isZan = res.data.Works.isZan;
					};

				});
			},
			shareHandle(ArtisterID, ActionTable, ActionID, ActionType, ActionName, GetWallet) {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/UserAction', {
						ArtisterID: ArtisterID,
						ActionType: ActionType,
						ActionName: ActionName,
						ActionTable: ActionTable,
						ActionID: ActionID,
						GetWallet: GetWallet,
						AddValue: ''
					}).then(res => {
						// console.log('favNotice', res);
						if (res.code == 200) {
							if (res.data !== 0) {
								this.getWorks()
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			},
			favHandle(WorksID, isZan, ArtisterID, content) {
				if (uni.getStorageSync("isLogin")) {
					this.isZan = !this.isZan
					let options = {
						WorksID,
						isZan,
						ArtisterID,
					}
					this.$httpost('/Works/zan', options).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: content,
								icon: 'success'
							})
						}

					})
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			}
		}
	}
</script>

<style lang="scss">
	.authed {
		// position:absolute;
		// z-index:100;
		// right: -10rpx;
		// width:20rpx;
		// height:20rpx;
		position: absolute;
		z-index: 100;
		right: -5rpx;
		top: -5rpx;
		display: flex;
		align-items: flex-end;
	}

	.UserHeadPic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #CCC;
		float: left;
	}

	.UserHeadPic image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
	}

	.commCardTitle {
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.commCardMemo {
		color: #666;
		line-height: 50rpx;
	}

	.worksHeadPic {
		width: 90rpx;
		height: 90rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-position: center;
		background-size: cover;
		border-radius: 50rpx;
		// overflow: hidden;
		position: relative;
	}

	.actionBar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		right: 0;
		height: 125rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
		padding: 0 20rpx;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 230rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		// margin-right: 26rpx;
	}

	.lianxiBtn-color {
		background-color: #000000;
		color: #fff;
	}

	.goutong-color {
		background-color: $globalColor;
		color: #333;
	}

	.shareBtn {
		width: 50rpx;
		height: 52rpx;
		// margin:20rpx;
		// margin-top:10rpx;
		// background-image:url('../static/icon/share.png');
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		margin: 20rpx 20rpx 0 0;

		&::after {
			border: none;
		}
	}

	.favBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		font-size: 30px;
		color: #646464;
		margin: 17rpx 20rpx 0 0;
		// width:50rpx;height:50rpx;margin:20rpx;margin-top:15rpx;background-image:url('../static/icon/fav.png');background-size:cover;
	}

	.favokBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		font-size: 30px;
		color: #FFDD00;
		margin: 17rpx 20rpx 0 0;
		// width:50rpx;height:50rpx;margin:20rpx;margin-top:15rpx;background-image:url('../static/icon/favok.png');background-size:cover;
	}

	.labelName {
		float: left;
		margin: 10rpx;
		width: auto;
		padding: 10rpx;
		background-color: #FFFFDD;
		border-radius: 5rpx;
	}
</style>